<template>
  <el-scrollbar
    ref="scrollbarRef"
    class="custom-scrollbar-container px-2"
    @scroll="handleScroll"
    :style="{ height }"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div ref="contentRef" class="scroll-content">
      <slot></slot>
    </div>
    <el-empty v-if="isEmpty" :image-size="100" />
  </el-scrollbar>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  height: {
    type: String,
    default: '100%'
  },
  isEmpty: {
    type: Boolean,
    default: false
  },
  scrollSpeed: {
    type: Number,
    default: 0.05
  }
})

const emit = defineEmits(['scroll-complete'])

const scrollbarRef = ref(null)
const contentRef = ref(null)
const autoScrollInterval = ref(null)
const isHovered = ref(false)
const scrolling = ref(false)

const startAutoScroll = () => {
  if (isHovered.value || props.isEmpty) return
  
  const scrollbar = scrollbarRef.value
  if (!scrollbar?.wrap$) return

  let lastTime = performance.now()
  let currentPosition = 0

  const animate = (currentTime) => {
    if (isHovered.value) {
      autoScrollInterval.value = requestAnimationFrame(animate)
      return
    }

    const currentScrollbar = scrollbarRef.value
    if (!currentScrollbar?.wrap$) {
      autoScrollInterval.value = requestAnimationFrame(animate)
      return
    }

    const deltaTime = currentTime - lastTime
    lastTime = currentTime

    try {
      const maxScroll = currentScrollbar.wrap$.scrollHeight - currentScrollbar.wrap$.clientHeight

      if (maxScroll <= 0) {
        autoScrollInterval.value = requestAnimationFrame(animate)
        return
      }

      currentPosition += (deltaTime * props.scrollSpeed)

      if (currentPosition >= maxScroll) {
        if (!scrolling.value) {
          scrolling.value = true
          currentPosition = 0
          currentScrollbar.wrap$.scrollTop = 0
          emit('scroll-complete')
          setTimeout(() => {
            scrolling.value = false
          }, 1000)
        }
      } else {
        currentScrollbar.wrap$.scrollTop = currentPosition
      }
    } catch (e) {
      console.error('Scroll error:', e)
    }

    autoScrollInterval.value = requestAnimationFrame(animate)
  }

  autoScrollInterval.value = requestAnimationFrame(animate)
}

const stopAutoScroll = () => {
  if (autoScrollInterval.value) {
    cancelAnimationFrame(autoScrollInterval.value)
    autoScrollInterval.value = null
  }
}

const handleMouseEnter = () => {
  if(props.isEmpty) return
  isHovered.value = true
  stopAutoScroll()
}

const handleMouseLeave = () => {
  if(props.isEmpty) return
  isHovered.value = false
  startAutoScroll()
}

const handleScroll = () => {
  if(props.isEmpty || !isHovered.value) return
}

onMounted(() => {
  if (!props.isEmpty) {
    startAutoScroll()
  }
})

onUnmounted(() => {
  stopAutoScroll()
})

defineExpose({
  startAutoScroll,
  stopAutoScroll
})
</script>

<style scoped lang="scss">
.custom-scrollbar-container {
  overflow: hidden;
  position: relative;

  :deep(.el-scrollbar__bar.is-vertical) {
    width: 6px;
    opacity: 0;
    transition: opacity 0.3s;

    .el-scrollbar__thumb {
      background-color: rgba(33, 90, 255, 0.3);
      &:hover {
        background-color: rgba(33, 90, 255, 0.5);
      }
      &:active {
        background-color: rgba(33, 90, 255, 0.7);
      }
    }
  }

  &:hover {
    :deep(.el-scrollbar__bar.is-vertical) {
      opacity: 1;
    }
  }

  .scroll-content {
    position: relative;
    min-height: 100%;
    transform: translate3d(0, 0, 0);
  }
}
</style> 